<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>微服务加载矢量电网</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>
<body id="body">
<div id='map'></div>
<div class="opt_panel">
    <button onclick="onShow()">显示</button>
    <button onclick="onHide()">隐藏</button>
    <button onclick="onLock()">锁定视图</button>
    <button onclick="onUnlock()">解锁视图</button>
</div>
</body>
</html>

<script>
    //示例说明：
    //展示了如何通过微服务加载电网图
    mapOptions = {
        // zoom: 16,
        // center: {lng: 118.22360047593236, lat: 24.554283775584125}
        zoom:23,
        center:{lng: 118.12379605022966, lat: 24.68912609913758}
        // zoom: 20.6,
        // center: {lng: 118.12409305486335, lat: 24.6888817241327}
    }
    // layers= [1001018]
    gridLayerOptions = {
        // hidelayers: '1102000,1101000,1103000,1100000,1106000,1107000,1110000,1163000,1109000,1105000,1114000,1112000,1113000,1167000'
    }



    function onShow() {
        gridLayer.setVisible(true)
    }

    function onHide() {
        gridLayer.setVisible(false)
    }

    /**
     * 锁定视图后，会保留当前渲染的内容。地图漫游，缩放均不会触发电网数据更新
     */
    function onLock() {
        gridLayer.setLockViewDevs(true)
    }

    /**
     * 解锁后，地图漫游，缩放会正常触发电网网架的更新
     */
    function onUnlock() {
        gridLayer.setLockViewDevs(false, true)
    }


    window.onload = function () {
        loadGeoMap_ms(() => {

            // egisV2.options.excludedFillTypes = egisV2.options.excludedFillTypes.concat(['1001019', '1001018'])

            map.showTileBoundaries = false
            mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'

            // egisV2.MicroService.serviceInfo.encMode = true
            // egisV2.MicroService.serviceInfo.sm4Type = 'CBC'

            initGridLayer()
            //指定电力线设备的最小宽度
            egisV2.options.elineMinWidth = 15

            // egisV2.options.symFileUrl = 'libs/allSym0607.sym'
            //
            // mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
            // egisV2.util.SpriteUtil.loadSymFile('libs/allSym0607.sym').then(
            //     res => {
            //         initGridLayer()
            //         //指定电力线设备的最小宽度
            //         egisV2.options.elineMinWidth = 15
            //
            //         gridLayer.on(egisV2.event.GridVectorLayerEvent.BEFORE_RENDER, e => {
            //
            //             e.keys.forEach(key => {
            //                 e.data[String(key)].features.forEach((fea, index, arr) => {
            //                     arr[index].properties.opacity = 1
            //                 })
            //             })
            //         })
            //
            //
            //         gridLayer.on('click', data => {
            //             //处理被点中的设备
            //             // console.log('click---点击要素数:',data.features.length)
            //             // console.log('click---点击事件对象:',data.event)
            //         })
            //         gridLayer.on('mouseenter', devData => {
            //             //移入设备
            //             // console.log('enter---要素数:',devData.features.length)
            //             // console.log('enter---图层ID:', devData.layerId)
            //         })
            //         gridLayer.on('mouseleave', devData => {
            //             //移出设备
            //             // console.log('leave---图层ID:',devData.layerId)
            //         })
            //     }
            // )

        })
    }

</script>
